<template>
	<view>
		<!-- <div @click = to>我是首页</div> -->
		<view class="head">
			<view class="head_top">
				<view style="width:520upx;"  @click="search">
					<u--input    style="border-radius: 50upx; background-color: #82EECF;  width:500upx;"  clearable  :value="value1"  prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #DFFBF1"></u--input>
				</view>
				
				<span>搜索</span>
			</view>
			<view v-for="(item,index) in lien" :key="index">
				<view class="u-demo-block">
					<text class="u-demo-block__title"> </text>
					<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="autoplay" radius="15"
						bgColor="rgba(220,38,38,0)"></u-swiper>
				</view>
				<view class="icon_box">
					<ul>
						<li>
							<view class="iconmin" style="background-color: #5AD3FF;    background-image:linear-gradient(140deg, #ddd 5%, #5AD3FF 85%);">
								<!-- background-image:linear-gradient(0deg, #7A88FF, #7AFFAF); -->
								<u--image :showLoading="true"    :src="item.icon" width="70upx" height="70upx"></u--image>
							</view>
							<span>数码家电</span>
						</li>  
						<li>
							<view style="background-color: #A1AFFE;  background-image:linear-gradient(140deg, #ddd, #A1AFFE;" class="iconmin"   >
				
								<u--image :showLoading="true" :src="item.icon_1" width="70upx" height="70upx"></u--image>
							</view>
							<span>图书文具</span>
						</li>
						<li>
							<view style="background-color: #FFCB85;   background-image:linear-gradient(140deg, #ddd, #FFCB85;" class="iconmin" >
				
								<u--image :showLoading="true" :src="item.icon_2" width="70upx" height="70upx"></u--image>
							</view>
							<span>服饰鞋包</span>
						</li>
						<li>
							<view style="background-color: #FFA4C9; background-image:linear-gradient(140deg, #ddd, #FFA4C9;  " class="iconmin">
								<u--image :showLoading="true" :src="item.icon_3" width="70upx" height="70upx"></u--image>
							</view>
							<span>美妆闲置</span>
						</li>
						<li>
							<view  @click="list" style="background-color:#73E66D;  background-image:linear-gradient(140deg, #ddd, #73E66D; " class="iconmin">
								<u--image :showLoading="true" :src="item.icon_4" width="70upx" height="70upx"></u--image>
							</view>
							<span>全部分类</span>
						</li>
					</ul>
				</view>
				<view class="love">
					<view class="love_head">
						<view class="love_left">
							<i></i>
							<h3><b>爱心公益</b></h3>
						</view>
						<view class="love_right">
							<span>查看更多</span>
							<i>></i>
						</view>
					</view>
					<view class="love_img">
						<u--image :showLoading="true" :src="item.love" width="720upx" height="300upx" radius="15px"></u--image>
					</view>
					<view class="loved">
						<u--image :showLoading="true" :src="loved" width="40upx" height="40upx" radius="15px"></u--image>
						<span>爱回收绿色公益</span>
					</view>	
					<!-- {{home}} -->
					<view class="love_text">
						<span>捐赠一份爱心!换来他人一份温暖!</span>
						<ul>
							<li @click='love_dian(item.love_like)'>
								<u-icon name="heart" :color="item.love_like === 0 ?'#E3E3E3':'red'" size="20"></u-icon>
								<span>{{item.love_view}}</span>
							</li>
							<li>
								<u-icon name="eye" color="#E3E3E3" size="20"></u-icon>
								<span>{{item.love_view}}</span>
							</li>
							<li>
								<u-icon name="chat" color="#E3E3E3" size="20"></u-icon>
								<span>{{item.love_chat}}</span>
							</li>
						</ul>
					</view>
				</view>
				<view class="slide">
					<view class="slide_head">
						<view class="slide_head">
							<view class="slide_left">
								<i></i>
								<h3><b>广场话题</b></h3>
							</view>
							<view class="slide_right">
								<span>查看更多</span>
								<i>></i>
							</view>
						</view>
					</view>
					<view class="slide_scroll">
						<div class="img-list-wrapper">
							<ul class="img-list">
								<li class="item">
									<view class="context">余光中先生说:“月色与雪色之间,你是
										<br>
										第三种绝色”
									</view>
									<img :src="item.square_image" alt="">
									<div class="name">
										<u--image :showLoading="true" :src="image" width="80upx" height="80upx"
											></u--image>
										<div class="image">
											<h4>你得支棱起来啊</h4>
											<span>粉丝:{{item.square_fans}}</span>
											<span>关注:{{item.square_attention}}</span>
										</div>
										<div class="icon">
											<view class="icon_one">
												<u-icon name="chat"  color="#E3E3E3" size="20"></u-icon>
												<span>{{item.square_chat}}</span>
											</view>
				
											<view class="icon_one" @click="square(item.square_love)">
												<u-icon name="heart" :color="item.square_love==0?' #E3E3E3':'red'" size="20"></u-icon>
												<span>{{item.square_chat}}</span>
				
											</view>
				
										</div>
									</div>
								</li>
								<li class="item">
									<view class="context">余光中先生说:“月色与雪色之间,你是
										<br>
										第三种绝色”
									</view>
									<img :src="item.square_img" alt="">
									<div class="name">
										<u--image :showLoading="true" :src="image" width="80upx" height="80upx"
											></u--image>
										<div class="image">
											<h4>你得支棱起来啊</h4>
											<span>粉丝:{{item.square_fans}}</span>
											<span>关注:{{item.attention}}</span>
										</div>
										<div class="icon">
											<view class="icon_one">
												<u-icon name="chat" color="#E3E3E3" size="20"></u-icon>
												<span>{{item.square_chat}}</span>
											</view>
								
											<view class="icon_one"  @click="square(item.square_love)">
												<u-icon name="heart" :color="item.square_love== 0 ?' #E3E3E3':'red'" size="20"></u-icon>
												<span>{{item.square_chat}}</span>
								
											</view>
										</div>
									</div>
								</li>
								<li class="item">
									<view class="context">余光中先生说:“月色与雪色之间,你是
										<br>
										第三种绝色”
									</view>
									<img :src="srced" alt="">
									<div class="name">
										<u--image :showLoading="true" :src="image" width="80upx" height="80upx"
											></u--image>
										<div class="image">
											<h4>你得支棱起来啊</h4>
											<span>粉丝:98</span>
											<span>关注:98</span>
										</div>
										<div class="icon">
											<view class="icon_one">
												<u-icon name="chat" color="#E3E3E3" size="20"></u-icon>
												<span>{{item.square_chat}}</span>
											</view>
								
											<view class="icon_one"  @click="square(item.square_love)">
												<u-icon name="heart" :color="item.square_love == 0 ?' #E3E3E3':'red'" size="20"></u-icon>
												<span>{{item.square_chat}}</span>
								
											</view>
								
										</div>
									</div>
								</li>
							</ul>
						</div>
					</view>
				</view>
			</view>
			
			<view class="tabs">
				<view class="" style="padding-bottom:130upx">
					<u-tabs :list="list1" :current="current" @click="click"></u-tabs>
					<view class="tabs_cut" v-show="current == 0" >
						<view class="img_list"  v-for="item in tabs">
							<view   class="tabs_image" :style="`background: url(${item.image}) no-repeat;background-size:cover`">
							</view>
							<view>
								<h4><tt>{{item.name}}</tt></h4>
								<view class="tabs_text">
									<h4 style="color: #FF7098">{{item.meony}}</h4>
									<span>已经有{{item.collect}}个收藏</span>
								</view>
								<u-divider style="margin: 0px;" ></u-divider>
								<view class="tabs_user">
									<u--image :showLoading="true" shape="circle" :src="srced" width="80upx" height="80upx"
										></u--image>
									<view class="tabs_context">
					
										<h5>用户名</h5>
										<span> 粉丝:{{item.bans}}</span>
										<span>关注:{{item.bansed}}</span>
									</view>
								</view>
							</view>
						</view>	
					</view>
				<view class="tabs" v-show="current == 1">
						暂无数据
				</view>
				<view class="tabs" v-show="current == 2">
						暂无数据
				</view>
				<view class="tabs" v-show="current == 3">
						暂无数据
				</view>
				<view class="tabs" v-show="current == 4">
						暂无数据
				</view>
				<view class="tabs" v-show="current == 5">
						暂无数据
				</view>
				</view>
				
			
			</view>
		</view><tabBar :current-page="1"></tabBar>
	</view>
	
</template>

<script>
	import tabBar from '../../components/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				autoplay:true,
				value1:'请输入内容',
				image: "http://127.0.0.1:7001/public/user.png",
				loved: 'http://127.0.0.1:7001/public/loved.png',
				srcd: "http://127.0.0.1:7001/public/love.png",
				src: "http://127.0.0.1:7001/public/icon.png",
				srced: 'http://127.0.0.1:7001/public/souare_1.png',
				commodity: 'http://127.0.0.1:7001/public/commodity.png',
				lien:[],
				home:[],
				list3: [
				"http://127.0.0.1:7001/public/context.png",
				"http://127.0.0.1:7001/public/context_one.png",
				"http://127.0.0.1:7001/public/context_two.png",	
				
				],
				tabs:[{
					name:"卡通文具盒",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity.png',
					bans:'98',
					bansed:'98'
					
				},
				{
					name:"啊狸布偶一对",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity_1.png',
					bans:'98',
					bansed:'98'
				},
				{
					name:"二手女士开通兔子包",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity_2.png',
					bans:'98',
					bansed:'98'
				},{
					name:"二手长袖上衣",
					meony:"$23",
					collect:'2',
					image:'http://127.0.0.1:7001/public/commodity_3.png',
					bans:'98',
					bansed:'98'
				}
				],
				current:0,
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				obj:{}
			};
		},

		methods: {
			love_dian(i){
				let objs=Object.assign(this.obj,{love_like:!i})
				this.$api.dianupMsg(objs).then(res=>{
					// console.log(res)
					this.$api.lwjmethod().then(res=>{
						this.lien=res.data
						// console.log(this.lien)
					})
				})
			},
			square(i){
				let objs=Object.assign(this.obj,{square_love:!i})
				this.$api.dianupMsg(objs).then(res=>{
					// console.log(res)
					this.$api.lwjmethod().then(res=>{
						this.lien=res.data
						// console.log(this.lien)
					})
				})
			},
			search(){
					uni.navigateTo({
						url:'/pages/Home/search'
					})
			},
			to() {
				uni.switchTab({
					url: '/pages/Center/Center'
				})
			},
			// click(item) {
			// 	this.current = item.index
			// },
			list(){
				uni.navigateTo({
					url:'/pages/Home/list'
				})
			}
		},
		mounted(){
			this.$api.gethome().then(res=>{
				this.obj=res.data[0]
			})
			
			this.$api.lwjmethod().then(res=>{
				this.lien=res.data
				console.log(this.lien)
			})
			// this.$api.lwjhome().then(res=>{
			// 	let a = []
			// 	for(let key in res.data[0]){
			// 		a.push(res.data[0][key])
			// 		 // this.home = res.data[0][key]
			// 	}
			// this.home =a
			// })
		}
	}
</script>

<style lang="scss" scoped>
	
	.head {
		// display: flex;
		height: 350upx;
		background-color: beige;
		border-bottom-right-radius: 150upx;
		border-bottom-left-radius: 150upx;
		background-color: #FFFFFF;
		background-image: url("http://127.0.0.1:7001/public/1.png");

		.head_top {
			height: 120upx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-around;

			// .head_search {}

			span {
				width: 100upx;
				height: 70upx;
				text-align: center;
				line-height: 70upx;
				display: inline-block;
				color: #DFFBF1;
				background-color: #9EF2D5 ;
				// border: 1px #9EF2D5 solid;
				border: 1px rgba(255,255,255,0.2) solid;
				border-radius: 40upx;
			}
		}

		.u-demo-block {
			// margin: 30px 0 0 0;
		}

		.icon_box {
			// height: 100px;
			border: 1px #FFFFFF solid;
			border-radius: 15px;
			margin: 15px 0 0 0;
			padding: 10px 5px 10px 0;
			box-shadow: 0px 10px 10px #ddd;
			// background-color: aquamarine;

			ul {
				list-style: none;
				padding-inline-start: 5px;
				display: flex;
				justify-content: space-around;


				li {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					align-content: space-between;
					border-radius: 50upx;

					span {
						display: inline-block;
						color: rgba(180, 180, 180, 1);
					}
				}

				.iconmin {
					width: 60px;
					height: 60px;
					justify-content: space-evenly;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 60px;

				}

			}
		}

		.love {
			height: 500upx;
			box-shadow: 0px 10px 10px #ddd;
			border: 1px #FFFFFF solid;
			background-color: #FFFFFF;
			border-radius: 15px;
			margin: 100upx 0 0 0;

			.love_head {
				display: flex;
				height: 80upx;
				// width: 720upx;
				justify-content: space-between;
				align-items: center;

				.love_left {
					display: flex;

					i {
						display: inline-block;
						width: 20upx;
						height: 50upx;
						border-radius: 15px;
						margin: 0 5px 0 5px;
						background-color: #22CCCB;
					}

				}

				.love_right {
					display: flex;
					align-items: baseline;

					span {
						font-size: 10upx;
					}
				}
			}

			.love_img {
				display: flex;
				justify-content: space-around;
			}

			.loved {
				display: flex;
				align-items: center;
				padding: 0 0 0 10px;

				span {
					font-size: 18px;
					color: #EF7FAF;
				}
			}

			.love_text {
				display: flex;
				padding: 5px 0 0 10px;

				span {
					display: flex;
					font-size: 10px;
					// display: inline-block;
					align-items: center
				}

				ul {
					display: flex;
					list-style: none;
					width: 360upx;
					justify-content: flex-end;
					padding-inline-start: 0px;

					li {
						display: flex;
						align-items: center;

						span {
							color: #DFDFDF;
						}
					}

				}

			}
		}

		.slide {
			// display: flex;
			// height: 80upx;
			// width: 720upx;
			margin: 120upx 0 0 0;
			// justify-content: space-between;	
			// align-items: center;

			.slide_head {
				display: flex;
				height: 80upx;
				width: 720upx;
				justify-content: space-between;
				align-items: center;

				.slide_left {
					display: flex;

					i {
						display: inline-block;
						width: 20upx;
						height: 50upx;
						border-radius: 15px;
						margin: 0 5px 0 5px;
						background-color: #22CCCB;
					}

				}

				.slide_right {
					display: flex;
					align-items: baseline;

					span {
						font-size: 10upx;
					}
				}
			}

			.slide_scroll {

				.img-list-wrapper {
					// width: 100%;
					overflow-x: scroll;
					margin-top: 20px;
					padding: 0 20px;

					&::-webkit-scrollbar {
						width: 0
					}

					.img-list {
						
						padding: 0;
						margin: 0;
						display: block;
						width: 900px;

						.item {
							display: inline-block;
							width: 280px;
							box-shadow: 0px 10px 10px #ddd;
							border: 1px #FFFFFF solid;
							// background-color: #EF7FAF;

							.context {
								display: flex;
								font-size: 8upx;
							}

							&:not(:first-child) {
								margin-left: 20px;
							}

							img {
								width: 250px;
								height: 150px;
								display: block;
								border-radius: 10px;
							}

							.name {
								width: 300px;
								text-align: center;
								// justify-content: space-evenly;	
								color: #646464;
								display: flex;
								font-size: 14px;
								margin-top: 10px;

								.image {

									// display: flex;
									span {
										font-size: 10upx;
									}
								}

								.icon {
									width: 100px;
									// background-color: #22CCCB;
									// display: flex;
									height: 60px;

									// flex-direction: row;
									.icon_one {
										display: flex;
										justify-content: flex-end;
									}

								}
							}
						}
					}
				}

			}
		}

		.tabs {
			.tabs_cut {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 100upx;
				border: 1px #FFFFFF solid;
				justify-content: space-around;
				// width: 400px;
				// height: 300px;	
				// display: flex;
				// background-color: #5AD3FF;

				.img_list {
					// display: flex;
					margin: 5px;
					width: 150px;
					// height: 220px;
					border-radius: 10px;
					box-shadow: 0px 5px 5px #ddd;
					// background-color: #EF7FAF;
					.tabs_context{
							span{
								font-size: 10upx;
							}
					}
					.tabs_user {
						
						display: flex;
						align-items: center;
					}

					.tabs_text {
						display: flex;
						// border-radius: 15px;
						// border-bottom: 1upx black solid;
						justify-content: space-between;

						span {
							font-size: 10upx;
						}
					}

					.tabs_image {
						// display: flex;
						width: 150px;
						height: 130px;
						// margin: 5px;
						// background-color: #22CCCB;
						background-size: cover;
						background-image: url("http://127.0.0.1:7001/public/commodity.png");
					}
				}
			}
		}
	}
</style>
